<template>
  <base-dialog
    :title="!form.id ? '新增' : '修改'"
    ref="baseDialog"
    width="40%"
    @handleClose="handleClose"
    @handleSubmit="handleSubmit"
  >
    <el-form ref="dataForm" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="菜单类型" prop="type">
            <el-radio-group v-model="form.type" size="small">
              <el-radio-button label="M">菜单</el-radio-button>
              <el-radio-button label="B">按钮</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="上级菜单">
            <treeselect
              v-model="form.parentId"
              :options="menuOptions"
              :normalizer="normalizer"
              :show-count="true"
              placeholder="选择上级菜单"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="图标" prop="icon" v-if="form.type === 'M'">
        <icon-picker v-model="form.icon"></icon-picker>
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input
          v-model="form.name"
          placeholder="请输入菜单名称"
          show-word-limit
          clearable
          :maxlength="8"
        />
      </el-form-item>
      <el-form-item label="路由地址" prop="path" v-if="form.type !== 'B'">
        <el-input v-model="form.path" placeholder="请输入路由地址" />
      </el-form-item>
      <el-form-item label="权限标识" prop="permission" v-if="form.type === 'B'">
        <el-input v-model="form.permission" placeholder="请输入权限标识" maxlength="50" />
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="排序" prop="orderNo">
            <el-input-number v-model="form.orderNo" controls-position="right" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="路由缓冲" prop="keepAlive" v-if="form.type !== 'B'">
            <el-radio-group v-model="form.keepAlive">
              <el-radio-button label="N">否</el-radio-button>
              <el-radio-button label="Y">是</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="打开方式" prop="openType">
            <el-radio-group v-model="form.openType">
              <el-radio-button label="1">内部</el-radio-button>
              <el-radio-button label="2">外部</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="是否隐藏" prop="hidden">
        <el-radio-group v-model="form.hidden">
          <el-radio label="N">否</el-radio>
          <el-radio label="Y">是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="form.remark"
          type="textarea"
          placeholder="请输入备注"
          :autosize="{ minRows: 2, maxRows: 12 }"
          maxlength="200"
        />
      </el-form-item>
    </el-form>
  </base-dialog>
</template>

<script>
import { add, menuList, edit } from "@/api/system/menu"
import Treeselect from "@/plugins/Treeselect"

export default {
  name: "Menu",
  components: { Treeselect },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 菜单树选项
      menuOptions: [],
      // 是否显示弹出层
      visible: false,
      form: {
        name: undefined,
        path: undefined,
        icon: undefined,
        permission: undefined,
        type: "M",
        keepAlive: "N",
        orderNo: 1,
        remark: "",
        hidden: "N",
        openType: "1"
      },
      // 表单校验
      rules: {
        name: [{ required: true, message: "菜单名称不能为空", trigger: "blur" }],
        orderNo: [{ required: true, message: "菜单顺序不能为空", trigger: "blur" }],
        path: [{ required: true, message: "路由地址不能为空", trigger: "blur" }],
        hidden: [{ required: true, message: "是否隐藏不能为空", trigger: "blur" }],
        keepAlive: [{ required: true, message: "路由缓冲不能为空", trigger: "blur" }],
        permission: [{ required: true, message: "权限标识不能为空", trigger: "blur" }]
      }
    }
  },
  methods: {
    init(isEdit, row) {
      if (row != null) {
        this.form.parentId = row.id
      } else {
        this.form.parentId = 0
      }
      this.$refs.baseDialog.dialogVisible = true
      this.getTreeselect()
      if (isEdit) {
        Object.keys(row).forEach((e) => {
          this.form[`${e}`] = row[`${e}`]
        })
      } else {
        this.form.id = undefined
      }
    },
    handleClose() {
      this.$refs.baseDialog.dialogVisible = false
      this.form = {
        name: undefined,
        path: undefined,
        icon: undefined,
        permission: undefined,
        type: "M",
        keepAlive: "N",
        orderNo: 1,
        remark: "",
        hidden: "N",
        openType: "1"
      }
    },
    // 表单提交
    handleSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          if (this.form.id) {
            edit(this.form).then(() => {
              this.$message.success("修改成功")
              this.handleClose()
              this.$emit("refreshDataList")
            })
          } else {
            add(this.form).then(() => {
              this.$message.success("添加成功")
              this.handleClose()
              this.$emit("refreshDataList")
            })
          }
        }
      })
    },
    /** 查询菜单下拉树结构 */
    getTreeselect() {
      menuList().then((response) => {
        this.menuOptions = []
        const menu = { id: 0, name: "根菜单", children: [] }
        menu.children = response.data
        this.menuOptions.push(menu)
      })
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      }
    }
  }
}
</script>
